<template>
  <el-card style="margin:20px">
    <el-tabs>
      <el-tab-pane label="账户用户设置">
        <el-form ref="refform" label-width="150px" :model="form" :rules="rules">
          {{ ID }}
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.username" class="x" />
          </el-form-item>

          <el-form-item label="新密码">
            <el-input v-model="form.password" type="password" class="x" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="gx">更新</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="个人详情" lazy>
        <info :quanbuser="quanbuser2" @geData="geData" />
      </el-tab-pane>
      <el-tab-pane label="岗位信息">
        <Ganweixx />
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import { sysuser } from '@/api/user'
import { sysuserid } from '@/api/yuangon'
export default {

  components: {
    info: () => import('./components/info.vue'),
    Ganweixx: () => import('./components/ganweixx.vue')

  },
  data() {
    return {
      quanbuser: [],
      quanbuser2: [],

      ID: this.$route.params.id,
      form: {
        username: '',
        password: ''
        // 所有用户数据
      },
      rules: {
        username: [
          { required: true, message: '不能为空', trigger: 'change' }
        ]

      }
    }
  },
  created() {
    this.geData()
  },
  methods: {
    async geData() {
      const res = await sysuser(this.ID)
      this.form.username = res.data.data.username

      this.quanbuser = res.data.data

      // 考虑到与父组件数据关联，利用深拷贝拿到新数据
      this.quanbuser2 = JSON.parse(JSON.stringify(this.quanbuser))
      console.log(res)
    },

    // 更新数据
    async gx() {
      await this.$refs.refform.validate()
      // 按接口需求传入所有参数quanbuser，在展开更新后数据
      await sysuserid({ ...this.quanbuser, ...this.form })
      // 回显设置 判断当前是否修改的是当前登录的账户
      if (this.$store.state.user.userPro.id === this.Id) {
        this.$store.dispatch('user/yhjbxx')
        this.$message.success('更新成功')
      }

      // 同时让子组件更新
      this.geData()
    }

  }

}
</script>

<style scoped lang="scss">
  .x{
    width: 300px;
  }

</style>
